<div class="demo-action">
  <button mat-raised-button (click)="toggleFilterPredicate()"> Toggle filter predicate </button>
  Status: {{useOverrideFilterPredicate}}
</div>

<mat-card>
  <mat-form-field>
    <input #filter matInput placeholder="Filter">
  </mat-form-field>

  <table mat-table [dataSource]="dataSource" matSort matSortActive="symbol" matSortDirection="asc">
    <ng-container matColumnDef="{{column}}" *ngFor="let column of columns">
      <th mat-header-cell mat-sort-header *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="columns"></tr>
    <tr mat-row *matRowDef="let row; columns: columns;"></tr>
  </table>

  <mat-paginator [pageSize]="5" showFirstLastButtons></mat-paginator>
</mat-card>
